<template>
    <van-list v-model="loading" :error="error" error.text="请求失败，点击重新加载" :finished="finished" finished-text="没有更多了"
        @load="onLoad" :immediate-check="false">

        <comment-item v-for="(item, index) in list" :key="index" :comment="item" @reply-click="$emit('reply-click',$event)" />
    </van-list>
</template>

<script>
import { getComments } from '@/api/comment.js'
import CommentItem from './comment-item.vue'
export default {
    name: 'CommentList',
    mixins: [],
    components: {
        CommentItem
    },
    props: {
        source: {
            type: [Number, Object, String],
            required: true
        },
        list: {
            type: Array,
            // 如果要用数组就使用（），不需要数组则默认 []
            default: () => []
        },
        type:{
            type:String,
            // 自定义Prop 数据验证
            validator(value){
                return ['a','c'].includes(value)
            },
            default:'a'
        }
    },
    data() {
        return {
            
            loading: false,
            finished: false,
            error: false,
            offset: null,
            limit: 10
        }
    },
    computed: {},
    watch: {},
    created() {
        this.onLoad()
    },
    mounted() { },
    methods: {
        async onLoad() {
            try {
                const { data } = await getComments({

                    type: this.type,
                    source: this.source.toString(),
                    offset: this.offset,
                    limit: this.limit,
                })
                // console.log(data)
                const { results } = data.data
                this.list.push(...results)
                this.$emit('onload-success', data.data)
                this.loading = false
                if (results.length) {
                    this.offset = data.data.last_id
                } else {
                    this.finished = true
                }
            } catch (err) {
                this.error = true
                this.loading = false
            }
        }
    }
}
</script>

<style scoped lang="less">

</style>